﻿<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="utf-8">
    <title>Product components</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="James Dennis">

      <script language="JavaScript" type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
      <script language="JavaScript" type="text/javascript" src="../js/jquery.hoverIntent.minified.js"></script>
	  <script language="JavaScript" type="text/javascript" src="../js/scripts.js"></script>
      <script language="JavaScript" type="text/javascript" src="../js/jquery-ui-1.10.2.custom.min.js"></script>
      <script language="JavaScript" type="text/javascript" src="../js/jquery.flexslider-min.js"></script>
          <script language="JavaScript" type="text/javascript" type="text/javascript">

              //Price Filter Range Slider & Inputs
              $(function () {
                  var $slider = $('.price-slider'),
                  $lower = $('#lower_bound'),
                  $upper = $('#upper_bound'),
                  min_price = 1000,
                  max_price = 2000;

                  $lower.val(min_price);
                  $upper.val(max_price);

                  $('.price-slider').slider({
                      orientation: 'horizontal',
                      range: true,
                      animate: 200,
                      min: 0,
                      max: 3000,
                      step: 50,
                      value: 0,
                      values: [min_price, max_price],
                      slide: function (event, ui) {
                          $lower.val(ui.values[0]);
                          $upper.val(ui.values[1]);
                      }
                  });

                  $lower.change(function () {
                      var low = $lower.val(),
                          high = $upper.val();
                      low = Math.min(low, high);
                      $lower.val(low);
                      $slider.slider('values', 0, low);
                  });

                  $upper.change(function () {
                      var low = $lower.val(),
                          high = $upper.val();
                      high = Math.max(low, high);
                      $upper.val(high);
                      $slider.slider('values', 1, high);
                  });
              });

              $(document).ready(function () {

                  //Product view Grid/List Change 
                  $(".product_views li a").click(function (e) {
                      var viewId = $(this).attr("class");
                      $("ul#product-array").fadeOut(500).hide().removeClass().addClass(viewId);
                      $("ul#product-array").fadeIn(500);
                      $(".product_views li").removeClass("active");
                      $(this).parent("li").addClass("active");
                      //event.preventDefault();
                      event.returnValue = false;
                  });

                  //Filter results checked appearance
                  $(".result_filters ul li label").click(function () {
                      if ($(this).children("input").is(':checked')) {
                          $(this).parent('li').addClass("checked");
                      }
                      else {
                          $(this).parent('li').removeClass("checked");
                      }
                  });

                  //Filter Collapse toggle
                  $(".result_filters aside header").click(function () {
                      if ($(this).parent("aside").children("section").is(':visible')) {
                          $(this).parent("aside").addClass("min");
                          $(this).parent("aside").children("section").slideUp(500);
                      }
                      else {
                          $(this).parent("aside").removeClass("min");
                          $(this).parent("aside").children("section").slideDown(500);
                      }
                  });

                  //Group Collapse toggle
                  $("a.collapsible-content").click(function () {
                      if ($(this).parent('header').next('section').is(':visible')) {
                          $(this).addClass("min");
                          $(this).parent('header').next('section').slideUp(500);
                          event.returnValue = false;
                      }
                      else {
                          $(this).removeClass("min");
                          $(this).parent('header').next('section').slideDown(500);
                          event.returnValue = false;
                      }
                  });

                  //test auto comlpete toggle
                  $(".search").click(function () {
                      if ($('.autocomplete-box').is(':visible')) {
                          $('.autocomplete-box').slideUp(500);
                      }
                      else {
                          $('.autocomplete-box').slideDown(500);
                      }
                  });


                  // Can also be used with $(document).ready()

                  $('.flexslider').flexslider({
                      animation: "slide",
                      animationLoop: false,
                      itemWidth: 100,
                      itemHeight: 100,
                      itemMargin: 5,
                      minItems: 2,
                      maxItems: 4
                  });

              });
</script>

	<link href="../css/common.css" rel="stylesheet">

    <style>
        .miniBasket {
  float: right;
  background: #FDC502;
  height: 28px;
  position: relative;
  margin-top: 4px;
  list-style: none;
  width:220px;
}
/*1.1. .minibasket .notification*/
.miniBasket .notification {
  padding: 0;
}
.miniBasket .notification .icon-basket {
  font-size: 1.7em !important;
  color: #000;
  padding-left: 5px !important;
  text-align: right;
}
/*1.2. .minibasket .total*/
.miniBasket .total {
  font-size: 1.0em;
  font-weight: bold;
  line-height: 38px;
  position: relative;
  text-align: right;
  .display-inline-block;
  width: 80px;
  color: #000;
}
.miniBasket .total span.items {
  font-size: 0.5em;
  position: absolute;
  top: -10px;
  right: 0;
}
/*1.3. .minibasket a.mb btn*/
a.view_mb.btn,
a.my_basket,
a.checkout_now {
  background: #f09102;
  padding: 5px 10px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  .display-inline-block;
}
.view_mb {
  cursor: pointer;
}
a.icon-arrow-down-3 {
  float: right;
  margin: 0 0 0 10px;
  padding: 2px 5px 0 !important;
  height: 28px;
  line-height: 28px;
  background: #f09102;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  .display-inline-block;
  font-size: 1.7em !important;
}
a.checkout_now {
  background: #222;
}
/*1.4. .minibasket .mb_panel*/
.miniBasket .mb_panel {
  position: absolute;
  top: 28px;
  right: 0px;
  background: #FDC502;
  padding: 10px;
  z-index: 1000000;
  width: 320px;
  -webkit-border-radius: 5px 0px 5px 5px;
  -moz-border-radius: 5px 0px 5px 5px;
  border-radius: 5px 0px 5px 5px;
  -webkit-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.5);
}
.mb_panel ul.product_list {
  margin: 0;
  padding: 0;
  display: table;
}
.mb_panel ul.product_list li {
  margin: 0;
}
.mb_panel .product ul {
  background: #fff;
}
.mb_panel .remove_product {
  width: 14px;
}
.mb_panel .product_thumb img {
  width: 35px;
  height: 100%;
  height: auto;
}
.mb_panel .prod_desc {
  width: 140px;
}
.mb_panel .productname {
  font-size: .8em;
}
.mb_panel .productdesc {
  font-size: .6em;
}
.mb_panel h4.productname,
.mb_panel p.productdesc {
  line-height: 1em;
  margin: 0;
  padding: 0;
}
.mb_panel .product_qty input[type="number"].stepper {
  width: 40px;
}
.mb_panel .productprice {
  width: 70px;
}
.mb_panel .delivery ul {
  background: #f09102;
  color: #fff;
  margin: 0 0 2px 0;
}
.mb_panel .delivery ul li {
  display: table-cell;
  padding: 5px;
}
.mb_panel .delivery_title {
  width: 250px;
}
.mb_panel .delivery_total {
  width: 70px;
}
.mb_panel .total_row ul {
  background: #222;
  color: #fff;
  margin: 0 0 2px 0;
}
.mb_panel .total_row ul li {
  display: table-cell;
  padding: 5px;
}
.mb_panel .total_title {
  width: 210px;
}
.mb_panel .total_qty {
  width: 40px;
  text-align: center;
}
.mb_panel .total_price {
  width: 70px;
}
footer.mini_basket_utilities {
  text-align: right;
}
        .prodRating{color:#DDDDDD;}
        .prodRating .gold{color:#ffac00;}

        .component .product {
            padding-bottom:20px; 
        }

        .component > .product h1 {
            color:#666;
            font-size:16px;
            line-height:2;
            padding-left:10px;
        }

        .component .product a { 
            color:#333;
            text-decoration:none;
        }

        .component .product {
            border:1px solid #ccc;
            display:block;
        }
        .component .product.short,
        .component .product.thumb{
            width: 220px;
            margin:10px;
        }

        .component .product.summary{
            width: 220px;
            margin: 10px;
        }
            .product.summary .prodRating{

            }
            .product.summary .prodRating{
                font-size:.8em;
            }

        .component .product.detail{
            width:830px; 
            margin: 10px;
        }

        .component .product.short,
        .component .product.thumb{padding:0px;}
            
            .product.short h1.prodName,
            .product.thumb h1.prodName{
                .display-inline-block; 
                margin:0; 
                font-size:.8em; 
                width:115px;
            }
            .product.short .prodOffer{
                .display-inline-block; 
                margin:0; 
                font-size:.8em; 
                text-align:right; 
                width:60px;
                padding-right:10px;
            }
    
    </style> 

</head>

<body>  
      <li class="miniBasket">
                    <div class="notification view_mb">
                        <span aria-hidden="true" class="icon-basket">My Basket</span><div class="total"><span class="items">1 item</span>&pound;83.50</div><a href="javascript:;"class="icon-arrow-down-3"></a>
                    </div>

 <div id="miniBasket" class="mb_panel topNav_slide_content">
                        <ul class="product_list">
                            <li class="product">
                                <ul class="01">
                                    <li class="remove_product"></li>
                                    <li class="product_thumb"><a href="javascript:;"><img src="http://content.gjwtitmuss.co.uk/1/1/images/products/small__4585111.jpg" /></a></li>
                                    <li class="prod_desc">
                                        <h4 class="productname"><a href="javascript:;">PRO PLAN PUPPY DIGESTION [LAMB & RICE]</a></h4>
                                        <p class="productdesc">14KG (SAVE 25% OFF RRP)</p>
                                    </li>
                                    <li class="product_qty"><input type="number" class="stepper" id="Number2" name="stepper1" min="1" max="10" value="1"/></li>
                                    <li class="productprice price">&pound;38.25</li>
                                </ul>
                            </li>
                             <li class="product">
                                <ul class="02">
                                    <li class="remove_product"></li>
                                    <li class="product_thumb"><a href="javascript:;"><img src="http://content.gjwtitmuss.co.uk/1/1/images/products/small__4585111.jpg" /></a></li>
                                    <li class="prod_desc">
                                        <h4 class="productname"><a href="javascript:;">PRO PLAN PUPPY DIGESTION [LAMB & RICE]</a></h4>
                                        <p class="productdesc">14KG (SAVE 25% OFF RRP)</p>
                                    </li>
                                    <li class="product_qty"><input type="number" class="stepper" id="Number1" name="stepper1" min="1" max="10" value="1"/></li>
                                    <li class="productprice price">&pound;38.25</li>
                                </ul>
                            </li>
                            <li class="delivery">
                                <ul>
                                    <li class="delivery_title">Delivery</li>
                                    <li class="delivery_total price">&pound;7.00</li>
                                </ul>
                            </li>
                            <li class="total_row">
                                <ul>
                                    <li class="total_title">Total</li>
                                    <li class="total_qty">2</li>
                                    <li class="total_price price">&pound;83.50</li>
                                </ul>
                            </li>
                        </ul>                              
                                 
                        <footer class="mini_basket_utilities">
                          <a href="basket.shtml" class="my_basket btn">MY BASKET</a>
                          <a href="checkout.shtml" class="checkout_now btn">CHECKOUT NOW</a>
                        </footer>

                   </div>

    
</body>
</html>
